<template>
  <mt-popup v-model="popupVisible" position="right" class="userInfo" :modal="false">
    <div class="page userInfo">
      <div class="scroll-view">
        <customHeader middleTitle="联系人信息" @leftCallBack="back"></customHeader>
        <div class="page-body">
          <ul class="form-style">
            <li>
              <span>联系人</span>
              <div>
                <inputClear placeholder="请填写" v-model="linkMan" :maxlength="20"></inputClear>
              </div>
            </li>
            <li>
              <span>手机号</span>
              <div>
                <inputClear placeholder="请填写" v-model="linkManMobile" :maxlength="11"></inputClear>
              </div>
            </li>
            <li>
              <span>电子邮箱</span>
              <div>
                <inputClear placeholder="@" v-model="linkManEmail" :maxlength="64"></inputClear>
              </div>
            </li>
          </ul>
          <div class="btn-wrap">
            <div class="btn" @click="popupHide">确定</div>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import { Toast } from "mint-ui";
export default {
  name: "userInfo",
  data() {
    return {
      popupVisible: false,
      linkMan: "",
      linkManMobile: "",
      linkManEmail: "",
    };
  },
  props: {
    param: {
      type: Object
    }
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      if (!this.linkMan) {
        Toast("请填写联系人姓名");
        return;
      }
      if (!this.linkManMobile) {
        Toast("请填写手机号");
        return;
      }
      if (!CommonUtil.checkMobile(this.linkManMobile)) {
        Toast("请填写有效的手机号");
        return;
      }
      if (!this.linkManEmail) {
        Toast("请填写电子邮箱");
        return;
      }
      if (!CommonUtil.checkEmail(this.linkManEmail)) {
        Toast("请填写有效的电子邮箱");
        return;
      }
      this.$emit("getUserInfo", { linkMan: this.linkMan, linkManMobile: this.linkManMobile, linkManEmail: this.linkManEmail });
      this.popupVisible = false;
    },
    back() {
      this.popupVisible = false;
    },
  },

  created() { },
  components: {
    customHeader,
    inputClear
  },
};
</script>
<style lang='scss' scoped>
@import "mall";
</style>
